<template>
  <div class="color-picker">
    <div class="color-select" @click="open($event)">
      <div class="color-default" :style="{ background: color }" />
    </div>
    <!-- @click="()=>visible=!visible" -->
    <div
      class="popover-container"
      ref="popover"
      v-if="visible"
      @click="handle($event)"
    >
      <div
        id="dialog"
        class="popover-dialog-color"
        ref="dialog"
        :style="{
          top: `${top}px`,
        }"
      >
        <sketch-picker :value="color" @input="colorValueChange" />
        <div class="color-content">
          <div class="color-type-title">
            <select v-model="colorType" @change="changeType">
              <option value="default">默认颜色</option>
              <option value="collect">我的收藏</option>
              <option value="lately">最近使用</option>
            </select>
            <div class="color-right">
              <div
                class="create-color"
                @click="createColor"
                v-if="colorType !== 'lately'"
              >
                <svg-icon class="svg-icon" icon="add" />
              </div>
              <div class="clear" @click="clear">清空</div>
            </div>
          </div>
          <div class="colors-presets">
            <div
              class="colors-item"
              v-for="(item, index) in palette"
              :key="index"
              :style="{ background: item }"
              @click="changColors(item)"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Sketch } from "vue-color";
export default {
  components: {
    "sketch-picker": Sketch,
  },
  props: {
    value: String,
    type: {
      type: String,
    },
  },
  data() {
    return {
      top: 0,
      oldColor: "#FFFFFF00",
      visible: false,
      colorType: "default",
      color: this.value,
      collectColor: [],
      defaultColor: ["#409eff", "#0967F2", "#ECF6FD", "#609BEF"],
      palette: [],
      lately: [], // 最近使用颜色
      latelyColor: [], // 最近使用颜色
    };
  },
  created() {
    this.palette = this.defaultColor;
  },
  methods: {
    open(e) {
      //   this.visible = true;
      this.visible = !this.visible;
      // 设置颜色选择框的位置
      if (this.visible) {
        this.$nextTick((_) => {
          const designDom = document.getElementById("dialog");
          const bodyHeight = document.body.offsetHeight;
          const designHeight = designDom.offsetHeight;
          if (bodyHeight - e.clientY < designHeight) {
            this.top = e.clientY - designHeight / 2;
            return;
          }
          this.top = e.clientY;
        });
      }
    },
    handle(e) {
      // 点击空白区域关闭
      if (e.target != this.$refs.popover) {
        return;
      }
      this.visible = false;
    },
    createColor() {
      // 新建颜色
    },
    clear() {
      this.color = "#FFFFFF00";
      this.$emit("change", {
        key: this.type,
        value: this.color,
      });
    },
    changColors(item) {
      this.color = item;
      this.$emit("change", {
        key: this.type,
        value: this.color,
      });
    },
    colorValueChange(data) {
      this.color = data.hex8;
      this.$emit("change", {
        key: this.type,
        value: this.color,
      });
    },
    change(data) {
      this.$emit("change", {
        key: this.type,
        value: data.target.value,
      });
    },
    changeType(e) {
      this.colorType = e.target.value;
      if (this.colorType === "default") {
        this.palette = this.defaultColor;
      } else if (this.colorType === "collect") {
        this.palette = this.collectColor;
      } else {
        this.palette = this.latelyColor;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.color-picker {
  // position: relative;
}
.popover-container {
  //   position: absolute;
  top: 0px;
  left: 0px;
  //   width: 100vw;
  //   height: 100vh;
  background: transparent;
  // background-color: #000;
}

.popover-dialog-color {
  position: absolute;
  top: 50px;
  right: 244px;
  padding: 6px;
  transform: translateY(-50%);
  background: #fff;
  border-radius: 4px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 10px 0px;
  border: 1px solid var(--border-color);
  z-index: 1024;

  ::v-deep {
    .vc-sketch {
      position: relative;
      width: 200px;
      padding: 0;
      box-sizing: initial;
      background: #fff;
      border-radius: 0px;
      box-shadow: none;
    }

    .vc-sketch-presets {
      display: none !important;
      margin-right: -10px;
      margin-left: -10px;
      padding-left: 10px;
      padding-top: 10px;
      border-top: 1px solid #eee;
    }
  }
}

.color-content {
  width: 100%;
  padding-top: 10px;
  border-top: 1px solid #eee;

  & select {
    border: 1px solid #eee !important;
  }

  .color-right {
    height: 21px;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .clear {
      color: #000;
      font-size: 13px;

      &:hover {
        cursor: pointer;
        color: #409eff;
      }
    }
  }

  .color-type-title {
    display: flex;
    justify-content: space-between;
    align-content: center;

    .create-color {
      padding: 1px;
      width: 20px;
      width: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      border-radius: 2px;
      margin-right: 8px;

      .svg-icon {
        width: 14px;
      }

      &:hover {
        color: #409eff;
        background: rgba(0, 0, 0, 0.026);
      }
    }
  }

  .colors-presets {
    width: 220px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-right: -10px;
    margin-left: -10px;
    padding-left: 10px;
    padding-top: 10px;

    .colors-item {
      border-radius: 3px;
      overflow: hidden;
      margin: 0 10px 10px 0;
      vertical-align: top;
      cursor: pointer;
      width: 16px;
      height: 16px;
      box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.15);
    }
  }
}

.color-picker {
  width: 100%;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 2px;
  transition: all 0.28s;
  border: 1px solid #fff;

  .color-picker {
    position: relative;
    width: 24px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .color-select {
    height: 24px;
    display: flex;
    align-items: center;
  }

  .color-default {
    width: 15px;
    height: 15px;
    border: 1px solid var(--border-color);
    z-index: 1024;
  }
}
</style>
